<template>
	<main :class="['aui-content', { 'aui-content--tabs': route.meta.isTab }]">
		<!-- tab展示内容 -->
		<template v-if="route.meta.isTab">
			<el-dropdown class="aui-content--tabs-tools">
				<el-icon>
					<ArrowDown/>
				</el-icon>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click.native="tabRemoveHandle(store.state.contentTabsActiveName)">
							关闭当前标签页
						</el-dropdown-item>
						<el-dropdown-item @click.native="tabsCloseOtherHandle()">
								关闭其它标签页
						</el-dropdown-item>
						<el-dropdown-item @click.native="tabsCloseAllHandle()">
								关闭全部标签页
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
			<el-tabs v-model="store.state.contentTabsActiveName" @tab-click="tabSelectedHandle"
			         @tab-remove="tabRemoveHandle">
				<el-tab-pane
					v-for="item in store.state.contentTabs"
					:key="item.name"
					:name="item.name"
					:label="item.title"
					:closable="item.name !== 'home'"
					:class="{ 'is-iframe': tabIsIframe(item.iframeURL) }">
					<template v-if="item.name === 'home'">
					</template>
					<iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%"
					        frameborder="0" scrolling="yes"></iframe>
					<router-view v-else v-slot="{ Component }">
						<keep-alive v-if="item.name === store.state.contentTabsActiveName">
							<component :is="Component"/>
						</keep-alive>
					</router-view>
				</el-tab-pane>
			</el-tabs>
		</template>
		<!-- 其他方式, 展示内容 -->
		<template v-else>
			<keep-alive>
				<router-view/>
			</keep-alive>
		</template>
	</main>
</template>

<script setup>
import {useStore} from "vuex";
import {isURL} from "../utils/validate.js";
import {useRoute, useRouter} from "vue-router";
import {ArrowDown} from "@element-plus/icons-vue";

const store = useStore()
const router = useRouter()
const route = useRoute()
// tabs, 是否通过iframe展示
const tabIsIframe = (url) => {
	return isURL(url)
}
// tabs, 选中tab
const tabSelectedHandle = (tab) => {
	tab = store.state.contentTabs.filter(item => item.name === tab.name)[0]
	if (tab) {
		router.push({
			'name': tab.name,
			'params': {...tab.params},
			'query': {...tab.query}
		})
	}
}
// tabs, 删除tab
const tabRemoveHandle = (tabName) => {
	if (tabName === 'home') {
		return false
	}
	store.state.contentTabs = store.state.contentTabs.filter(item => item.name !== tabName)
	if (store.state.contentTabs.length <= 0) {
		store.state.sidebarMenuActiveName = store.state.contentTabsActiveName = 'home'
		return false
	}
	// 当前选中tab被删除
	if (tabName === store.state.contentTabsActiveName) {
		let tab = store.state.contentTabs[store.state.contentTabs.length - 1]
		router.push({
			name: tab.name,
			params: {...tab.params},
			query: {...tab.query}
		})
	}
}
// tabs, 关闭其它
const tabsCloseOtherHandle = () => {
	store.state.contentTabs = store.state.contentTabs.filter(item => {
		return item.name === 'home' || item.name === store.state.contentTabsActiveName
	})
}
// tabs, 关闭全部
const tabsCloseAllHandle = () => {
	store.state.contentTabs = store.state.contentTabs.filter(item => item.name === 'home')
	router.push({name: 'home'})
}
</script>
